<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    vue中提出了组件化开发的理念    提高代码的复用率

    组件 ：  将能实现特定功能的html css  js 以及一些静态资源放在一个文件中则就形成了一个组件  .vue
    组件分类:
        编写形式：
            1.非单文件组件     在一个页面中 定义多个组件
            2.单文件组件      将html css  js 等代码放在一个 .vue结尾的文件中   在一个.vue结尾的文件中只定义一个组件
       作用域:
            1.全局组件     将组件注册在 Vue上 ，则这个组件是全局组件  在任何通过Vue构建的实例中都可以使用
            2.局部组件     将一个组件注册在另外一个组件中，则这个组件只能在它注册的组件中进行使用  父子组件  A -> B  A-> C

-->

<div id="app">
    <!--    使用组件标签  完成组件的使用-->
    <!--    <student name="tom" age="20" major="Java"></student>-->
    <!--    <student name="jack" age="30" major="Web"></student>-->
    <!--    <student name="xiaoming" age="30" major="UI"></student>-->

    <student v-for="student in students" :name="student.name" :age="student.age" :major="student.major"></student>
</div>

<script>

    // 定义组件   全局组件
    // Vue.component('student', {
    //     template: `
    //     <div>
    //         <h3>学生信息展示</h3>
    //         <p>学生姓名:tom</p>
    //         <p>学生年龄:20</p>
    //         <p>学生专业:Java</p>
    //      </div>
    //     `
    // })
    //  局部组件的定义
    const student = {
        template: `
            <div>
                <h3>学生信息展示</h3>
                <p>学生姓名:{{name}}</p>
                <p>学生年龄:{{age}}</p>
                <p>学生专业:{{major}}</p>
            </div>
        `,
        props: ['name', 'age', 'major']   //   接收组件标签中传递的数据   在props中接收的参数 等同于 data中的数据
        // data(){
        //    return {
        //        name: 'jack',
        //        age: 30,
        //        major: 'Java'
        //    }
        // }
    }
    const vm = new Vue({
        el: '#app',
        data: {
            students: [
                {
                    name: 'jack',
                    age: 30,
                    major: 'Java'
                },
                {
                    name: 'tom',
                    age: 30,
                    major: 'Java'
                },
                {
                    name: 'xiaoming',
                    age: 30,
                    major: 'UI'
                }
            ]
        },
        methods: {

        },
        components: {  //  注册组件
            // student:student
            student
        }
    })
</script>
</body>
</html>
